{% extends 'base.html' %}
{% load static %}

{% block content %}

{% include 'partials/sweetalert.html' %}

<!-- 面包屑 -->
<div class="row mt-3">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="">首页</a></li>
                <li class="breadcrumb-item"><a href="">支出</a></li>
                <li class="breadcrumb-item active" aria-current="page">我的支出</li>
            </ol>
        </nav>
    </div>
</div>

<!-- 操作区 -->
<div class="row">
    <div class="col-2">
        <a href="{% url 'add-expense' %}" class="btn btn-primary">添加</a>
    </div>
    <!-- 导出 -->
    <div class="col-2 btn-group" role="group">
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"
                aria-expanded="false">
                导出
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="{% url 'download-csv' %}">CSV</a>
                <a class="dropdown-item" href="{% url 'download-excel' %}">Excel</a>
                <a class="dropdown-item" href="{% url 'download-pdf' %}">PDF</a>
            </div>
        </div>
    </div>
    <!-- 查询 -->
    <div class="col-8">
        <form class="form-inline float-right">
            <input class="form-control" type="text" name="search" value="{{search_text}}" placeholder="搜索">
            <input class="btn btn-outline-success ml-1" type="submit" value="Search">
        </form>
    </div>
</div>

<!-- 表格展示区 -->
<div class="row mt-3">
    <div class="col-12">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>金额</th>
                    <th>类型</th>
                    <th>日期</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for expense in page_obj %}
                <tr>
                    <td>{{ expense.amount }}</td>
                    <td>{{ expense.category }}</td>
                    <td>{{ expense.date|date:'Y-m-d' }}</td>
                    <td>{{ expense.description }}</td>
                    <td>
                        <a href="{% url 'edit-expense' expense.id %}" class="btn btn-secondary btn-sm">编辑</a>
                        <button class="btn btn-danger btn-sm deleteBtn" expenseID="{{expense.id}}">删除</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- 分页 -->
{% include 'partials/pagination.html' %}

<!-- echarts展示区 -->
<div class="row mt-3">
    <div class="col-md-6">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="categoryStats" style="width: 100%;height:400px;"></div>
    </div>
    <div class="col-md-6">
        <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
        <div id="dayStats" style="width: 100%;height:400px;"></div>
    </div>
</div>


{% endblock %}


{% block js %}
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'js/expense_delete.js' %}"></script>
<script src="{% static 'js/expense_index.js' %}"></script>
{% endblock %}